<!-- scroll-text.vue -->
<template>
  <view class="scroll-text">
    <view class="scroll-container" :style="{ height: containerHeight + 'rpx' }">
      <view 
        class="scroll-content" 
        :style="{ 
          height: contentHeight + 'rpx',
          transform: `translateY(${currentPosition}rpx)`,
          transition: transitionEnabled ? 'transform 0.5s ease' : 'none'
        }"
      >
        <view 
          v-for="(item, index) in displayList" 
          :key="index" 
          class="text-item"
          :data-text="item"
        >
          <text class="text-content" :style="{ lineHeight: itemHeight + 'rpx' }" @click="handleItemClick(item)">{{ item }}</text>
          <!-- <text class="copy-icon"><text class="iconfont icon-copy"></text></text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'scroll-text',
  props: {
    // 文本列表
    textList: {
      type: Array,
      default: () => []
    },
    // 显示数量
    showCount: {
      type: Number,
      default: 1
    },
    // 滚动速度（1-5）
    speed: {
      type: Number,
      default: 3
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true
    },
    // 文本高度（单位rpx）
    itemHeight: {
      type: Number,
      default: 60
    }
  },
  data() {
    return {
      currentPosition: 0,
      transitionEnabled: true,
      isPlaying: this.autoplay,
      animationTimer: null
    };
  },
  computed: {
    // 容器高度
    containerHeight() {
      return this.showCount * this.itemHeight;
    },
    // 内容高度
    contentHeight() {
      return this.displayList.length * this.itemHeight;
    },
    // 显示列表（原列表+复制列表用于循环）
    displayList() {
      return [...this.textList, ...this.textList];
    },
    // 动画间隔时间
    intervalTime() {
      return 3000 / this.speed;
    }
  },
  watch: {
    // 监听速度变化
    speed() {
      this.restartAnimation();
    },
    // 监听播放状态变化
    isPlaying(newVal) {
      if (newVal) {
        this.startAnimation();
      } else {
        this.stopAnimation();
      }
    },
    // 监听文本列表变化
    textList() {
      this.restartAnimation();
    }
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    this.stopAnimation();
  },
  methods: {
    // 开始动画
    startAnimation() {
      this.stopAnimation();
      
      if (!this.isPlaying || this.textList.length <= 1) return;
      
      this.animationTimer = setInterval(() => {
        this.scrollText();
      }, this.intervalTime);
    },
    // 停止动画
    stopAnimation() {
      if (this.animationTimer) {
        clearInterval(this.animationTimer);
        this.animationTimer = null;
      }
    },
    // 重新启动动画
    restartAnimation() {
      this.stopAnimation();
      this.currentPosition = 0;
      this.$nextTick(() => {
        this.startAnimation();
      });
    },
    // 滚动文本
    scrollText() {
      this.currentPosition -= this.itemHeight;
      
      // 如果滚动到了第二组数据的开头，则跳回第一组数据的开头
      if (this.currentPosition <= -this.textList.length * this.itemHeight) {
        this.transitionEnabled = false;
        this.currentPosition = 0;
        
        // 下一帧恢复过渡效果
        this.$nextTick(() => {
          this.transitionEnabled = true;
        });
      }
    },
    // 处理项目点击
    handleItemClick(itemTxt) {
      // const textItem = e.target.closest('.text-item');
      if (itemTxt) {
        const text = itemTxt;
        this.copyText(text);
        
        // 触发复制事件
        this.$emit('copy', text);
      }
    },
    // 复制文本
    copyText(text) {
      // 微信小程序环境
      // #ifdef MP-WEIXIN
      wx.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      });
      // #endif
      
      // H5环境
      // #ifdef H5
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed';
      textarea.style.opacity = 0;
      document.body.appendChild(textarea);
      textarea.select();
      
      try {
        document.execCommand('copy');
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
      } catch (err) {
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
      
      document.body.removeChild(textarea);
      // #endif
    },
    // 播放
    play() {
      this.isPlaying = true;
    },
    // 暂停
    pause() {
      this.isPlaying = false;
    },
    // 切换播放状态
    toggle() {
      this.isPlaying = !this.isPlaying;
    }
  }
};
</script>

<style scoped>
.scroll-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
}

.scroll-content {
  position: absolute;
  width: 100%;
}

.text-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0 25px; */
  /* border-bottom: 1px solid #e9ecef; */
  transition: all 0.3s ease;
  /* cursor: pointer; */
  background: #fff;
}

.text-item:active {
  background-color: #bbdefb;
  transform: scale(0.98);
}

.text-content {
  font-size: 32upx;
  color: #2c3e50;
  font-weight: 500;
  flex: 1;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* padding-right: 20px; */
}

/* .copy-icon {
  color: #3498db;
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s;
}

.copy-icon:active {
  background: #3498db;
  color: white;
} */
</style>